<!--DROP THIS FILE INTO YOUR BROWSER TO PREVIEW THE EFFECT-->
<!DOCTYPE html>
<html>

<head>
  <!--ADDITTONAL LINKS TO MAKE THE EXAMPLES LOOK PRETTY-->
  <!-- Bootstrap core CSS for better functionality-->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
  <!-- Some cool icons -->
  <link href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" rel="stylesheet">
  <!-- Awesome Material Design for Bootstrap Styles -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.8.2/css/mdb.min.css" rel="stylesheet">

  <!-- CORE FILES FOR PERFECT SCROLLBAR FUNCTIONALITY -->
  <!-- The Perfect Scrollbar CSS files -->
  <link href="./perfect-scrollbar.css" rel="stylesheet">
  <!-- The Perfect Scrollbar JS files -->
  <script src="./perfect-scrollbar.js"></script>

  <!--STYLE FOR MAKING PERECT SCROLLBAR ALWAYS VISIBLE-->
  <style>
    .ps__rail-x,
    .ps__rail-y {
      opacity: 0.6;
    }
  </style>

  <!--DEFINE CONTAINER-->
  <style>
    body {
      background-color: rgba(3, 169, 244, 0.1);
    }

    #container {
      background-color: rgb(255, 255, 255);
      position: relative;
      margin: 100px auto;
      padding: 0px;
      width: 600px;
      height: 500px;
      overflow: auto;
    }

    #container .content {
      width: 1280px;
      height: 900px;
    }
  </style>

</head>

<body>
  <!--EXAMPLE CONTENT-->
  <section class="text-center">
    <br>
    <h1>Always Visible</h1>
    <p class="lead">You can preview the effect offline below or <strong>fork ready to use template</strong> of this
      example.</p>


    <a class="btn btn-lg btn-outline-grey" href="https://mdbootstrap.com/freebies/perfect-scrollbar/"><i
        class="fas fa-book mr-2"></i>DOCUMENTATION</a>
    <a class="btn btn-lg btn-outline-black" href="https://github.com/mdbootstrap/perfect-scrollbar"><i
        class="fab fa-github mr-2"></i>GITHUB</a>
    <a class="btn btn-lg btn-outline-primary"
      href="https://mdbootstrap.com/snippets/jquery/filipkapusta/807575?utm_campaign=PS&utm_source=Package"><i
        class="fas fa-code mr-2"></i>TEMPLATE</a>
    <hr>

    <br>
    <div id="container" class="rounded">

      <!--EXAMPLE CONTENT-->
      <div class="content p-5">
        <h2 class="font-weight-bold text-center ">Hello I'm a piece of example content!</h2>
        <p class="lead mb-3 text-center ">You can just scroll trough me and marvel at the perfection of this scrollbar,
          but
          I'm also full of surprises!</p>

        <section class="my-4">
          <hr>
          <div class="row mt-3 justify-content-center">
            <div class="col-3">
              <!-- Card -->
              <div class="card">

                <!-- Card image -->
                <div class="view overlay">
                  <img class="card-img-top" src="https://mdbootstrap.com/img/Mockups/Lightbox/Thumbnail/img(89).jpg"
                    alt="Card image cap">
                  <a href="#!">
                    <div class="mask rgba-white-slight"></div>
                  </a>
                </div>

                <!-- Card content -->
                <div class="card-body">

                  <!-- Title -->
                  <h4 class="card-title">I'm a pretty card</h4>
                  <!-- Text -->
                  <p class="card-text">I'm very pretty and I have a pretty blue button, but it contains nothing, only
                    animated waves. I'm a sad,
                    pretty card.</p>
                  <!-- Button -->
                  <a href="#" class="btn btn-primary">Button</a>

                </div>

              </div>
              <!-- Card -->
            </div>
            <div class="col-3">
              <!-- Card -->
              <div class="card">

                <!-- Card image -->
                <div class="view overlay">
                  <img class="card-img-top" src="https://mdbootstrap.com/wp-content/uploads/2018/10/bootstrap.jpg"
                    alt="Card image cap">
                  <a href="#!">
                    <div class="mask rgba-white-slight"></div>
                  </a>
                </div>

                <!-- Card content -->
                <div class="card-body">

                  <!-- Title -->
                  <h4 class="card-title">I'm also pretty</h4>
                  <!-- Text -->
                  <p class="card-text">I'm very pretty and I have a pretty purple button, it contains a link to a
                    <strong>Bootstrap tutorial</strong>. I'm a happy,
                    pretty card.</p>
                  <!-- Button -->
                  <a href="https://mdbootstrap.com/education/bootstrap/?utm_campaign=PS&utm_source=Package"
                    class="btn btn-deep-purple">Tutorial</a>

                </div>

              </div>
              <!-- Card -->
            </div>
            <div class="col-3">
              <!-- Card -->
              <div class="card">

                <!-- Card image -->
                <div class="view overlay">
                  <img class="card-img-top" src="https://mdbootstrap.com/wp-content/uploads/2018/10/admin.jpg"
                    alt="Card image cap">
                  <a href="#!">
                    <div class="mask rgba-white-slight"></div>
                  </a>
                </div>

                <!-- Card content -->
                <div class="card-body">

                  <!-- Title -->
                  <h4 class="card-title">I'm also happy</h4>
                  <!-- Text -->
                  <p class="card-text">I'm very pretty and I have a pretty mdb-color button. It' leads to <strong>Admin
                      Dashboard building tutorial</strong>. I'm a happy,
                    pretty card.</p>
                  <!-- Button -->
                  <a href="https://mdbootstrap.com/education/bootstrap/admin-dashboard-introduction/?utm_campaign=PS&utm_source=Package"
                    class="btn btn-mdb-color">Tutorial</a>

                </div>

              </div>
              <!-- Card -->
            </div>
            <div class="col-3">
              <!-- Card -->
              <div class="card">

                <!-- Card image -->
                <div class="view overlay">
                  <img class="card-img-top" src="https://mdbootstrap.com/img/Marketing/products/jquery/mdb-free.jpg"
                    alt="Card image cap">
                  <a href="#!">
                    <div class="mask rgba-white-slight"></div>
                  </a>
                </div>

                <!-- Card content -->
                <div class="card-body">

                  <!-- Title -->
                  <h4 class="card-title font-weight-bold">I made y'all</h4>
                  <!-- Text -->
                  <p class="card-text">I'm very pretty and my button let's you download a <strong>free UI Kit</strong>
                    with
                    pretty, happy cards & over 500 of other material components!</p>
                  <!-- Button -->
                  <a href="https://mdbootstrap.com/docs/jquery/getting-started/download/?utm_campaign=PS&utm_source=Package"
                    class="btn btn-success"><i class="fas fa-download mr-2"></i>Download</a>

                </div>

              </div>
              <!-- Card -->
            </div>
          </div>
        </section>

        <section class="my-4 text-center">
          <hr>
          <h3>We are beautiful and colorful</h3>
          <p class="lead mb-3">We are some material scrollbars that could help you make your apps and projects even more
            perfect!</p>
          <a href="https://mdbootstrap.com/docs/jquery/javascript/scroll/?utm_campaign=PS&utm_source=Package"
            class="btn btn-sm btn-primary rounded">Learn
            more about us!</a>
          <div class="row mt-3 justify-content-center">

            <style>
              .scrollbar {
                margin-left: 30px;
                float: left;
                height: 300px;
                width: 65px;
                background: #fff;
                overflow-y: scroll;
                margin-bottom: 25px;
              }

              .force-overflow {
                min-height: 450px;
              }

              .scrollbar-primary::-webkit-scrollbar {
                width: 12px;
                background-color: #F5F5F5;
              }

              .scrollbar-primary::-webkit-scrollbar-thumb {
                border-radius: 10px;
                -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
                background-color: #4285F4;
              }

              .scrollbar-danger::-webkit-scrollbar-track {
                -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
                background-color: #F5F5F5;
                border-radius: 10px;
              }

              .scrollbar-danger::-webkit-scrollbar {
                width: 12px;
                background-color: #F5F5F5;
              }

              .scrollbar-danger::-webkit-scrollbar-thumb {
                border-radius: 10px;
                -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
                background-color: #ff3547;
              }

              .scrollbar-warning::-webkit-scrollbar-track {
                -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
                background-color: #F5F5F5;
                border-radius: 10px;
              }

              .scrollbar-warning::-webkit-scrollbar {
                width: 12px;
                background-color: #F5F5F5;
              }

              .scrollbar-warning::-webkit-scrollbar-thumb {
                border-radius: 10px;
                -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
                background-color: #FF8800;
              }

              .scrollbar-success::-webkit-scrollbar-track {
                -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
                background-color: #F5F5F5;
                border-radius: 10px;
              }

              .scrollbar-success::-webkit-scrollbar {
                width: 12px;
                background-color: #F5F5F5;
              }

              .scrollbar-success::-webkit-scrollbar-thumb {
                border-radius: 10px;
                -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
                background-color: #00C851;
              }

              .scrollbar-info::-webkit-scrollbar-track {
                -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
                background-color: #F5F5F5;
                border-radius: 10px;
              }

              .scrollbar-info::-webkit-scrollbar {
                width: 12px;
                background-color: #F5F5F5;
              }

              .scrollbar-info::-webkit-scrollbar-thumb {
                border-radius: 10px;
                -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
                background-color: #33b5e5;
              }

              .scrollbar-default::-webkit-scrollbar-track {
                -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
                background-color: #F5F5F5;
                border-radius: 10px;
              }

              .scrollbar-default::-webkit-scrollbar {
                width: 12px;
                background-color: #F5F5F5;
              }

              .scrollbar-default::-webkit-scrollbar-thumb {
                border-radius: 10px;
                -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
                background-color: #2BBBAD;
              }

              .scrollbar-secondary::-webkit-scrollbar-track {
                -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
                background-color: #F5F5F5;
                border-radius: 10px;
              }

              .scrollbar-secondary::-webkit-scrollbar {
                width: 12px;
                background-color: #F5F5F5;
              }

              .scrollbar-secondary::-webkit-scrollbar-thumb {
                border-radius: 10px;
                -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
                background-color: #aa66cc;
              }
            </style>
            <div class="scrollbar scrollbar-primary">
              <div class="force-overflow"></div>
            </div>
            <div class="scrollbar scrollbar-secondary">
              <div class="force-overflow"></div>
            </div>
            <div class="scrollbar scrollbar-default">
              <div class="force-overflow"></div>
            </div>
            <div class="scrollbar scrollbar-info">
              <div class="force-overflow"></div>
            </div>
            <div class="scrollbar scrollbar-success">
              <div class="force-overflow"></div>
            </div>
            <div class="scrollbar scrollbar-warning">
              <div class="force-overflow"></div>
            </div>

          </div>
        </section>

        <section class="my-4 text-center">
          <hr>
          <h3>I'm a picture of a boar</h3>
          <p class="lead mb-3">That's enough for me.</p>
          <div class="row mt-3 justify-content-center">
            <img src="https://mdbootstrap.com/img/Mockups/Lightbox/Thumbnail/boar.jpg" class="img-fluid z-depth-1"
              alt="1">

          </div>
        </section>

        <section class="my-4 text-center">
          <hr>
          <h3>I'm a basic Material Design sign-up form</h3>
          <p class="lead mb-3">Click on my button to learn more about me!</p>
          <div class="row mt-3 justify-content-center">
            <!-- Default form register -->
            <form class="text-center border border-light p-5">

              <p class="h4 mb-4">Sign up</p>

              <div class="form-row mb-4">
                <div class="col">
                  <!-- First name -->
                  <input type="text" id="defaultRegisterFormFirstName" class="form-control" placeholder="First name">
                </div>
                <div class="col">
                  <!-- Last name -->
                  <input type="text" id="defaultRegisterFormLastName" class="form-control" placeholder="Last name">
                </div>
              </div>

              <!-- E-mail -->
              <input type="email" id="defaultRegisterFormEmail" class="form-control mb-4" placeholder="E-mail">

              <!-- Password -->
              <input type="password" id="defaultRegisterFormPassword" class="form-control" placeholder="Password"
                aria-describedby="defaultRegisterFormPasswordHelpBlock">
              <small id="defaultRegisterFormPasswordHelpBlock" class="form-text text-muted mb-4">
                At least 8 characters and 1 digit
              </small>

              <!-- Phone number -->
              <input type="text" id="defaultRegisterPhonePassword" class="form-control" placeholder="Phone number"
                aria-describedby="defaultRegisterFormPhoneHelpBlock">
              <small id="defaultRegisterFormPhoneHelpBlock" class="form-text text-muted mb-4">
                Optional - for two step authentication
              </small>

              <!-- Newsletter -->
              <div class="custom-control custom-checkbox">
                <input type="checkbox" class="custom-control-input" id="defaultRegisterFormNewsletter">
                <label class="custom-control-label" for="defaultRegisterFormNewsletter">Subscribe to our
                  newsletter</label>
              </div>

              <!-- Sign up button -->
              <a href="https://mdbootstrap.com/docs/jquery/forms/basic/?utm_campaign=PS&utm_source=Package"
                class="btn btn-info my-4 btn-block">LEARN MORE
                ABOUT ME</a>

              <!-- Social register -->
              <p>or follow us on:</p>

              <a href="https://www.facebook.com/mdbootstrap" class="light-blue-text mx-2">
                <i class="fab fa-facebook-f"></i>
              </a>
              <a href="https://twitter.com/mdbootstrap" class="light-blue-text mx-2">
                <i class="fab fa-twitter"></i>
              </a>
              <a href="https://www.linkedin.com/company/material-design-for-bootstrap/" class="light-blue-text mx-2">
                <i class="fab fa-linkedin-in"></i>
              </a>
              <a href="https://github.com/mdbootstrap" class="light-blue-text mx-2">
                <i class="fab fa-github"></i>
              </a>

              <hr>

              <!-- Terms of service -->
              <p>By clicking
                <em>Sign up</em> you agree to our
                <a href="" target="_blank">terms of service</a>

            </form>
            <!-- Default form register -->

          </div>
        </section>

        <section class="my-4 text-center">
          <hr>
          <h3>We are leading Web Development technologies</h3>
          <p class="lead mb-3">Click on us if you're interested about learning more or getting our beautiful components
            for free.</p>
          <div class="row mt-3 justify-content-center">
            <div class="col-md-3">
              <!-- Card -->
              <div class="card card-image"
                style="background-image: url(https://mdbootstrap.com/img/Photos/Horizontal/Work/4-col/img%20%2814%29.jpg);">

                <!-- Content -->
                <div class="text-white text-center d-flex align-items-center rgba-black-strong py-5 px-4">
                  <div>
                    <a href="https://mdbootstrap.com/docs/jquery/?utm_campaign=PS&utm_source=Package"><img
                        src="https://mdbootstrap.com/img/Marketing/general/logo/small/jquery.png"></a>
                    <h3 class="card-title pt-2 font-weight-bold"><strong>jQuery</strong></h3>
                    <p>Get beautiful components and useful features by clicking the button below.</p>
                    <a href="https://mdbootstrap.com/docs/jquery/?utm_campaign=PS&utm_source=Package"
                      class="btn btn-indigo"><i class="fas fa-clone left"></i>Learn more</a>
                  </div>
                </div>

              </div>
              <!-- Card -->
            </div>
            <div class="col-md-3">
              <!-- Card -->
              <div class="card card-image"
                style="background-image: url(https://mdbootstrap.com/img/Photos/Horizontal/Work/4-col/img%20%2814%29.jpg);">

                <!-- Content -->
                <div class="text-white text-center d-flex align-items-center rgba-black-strong py-5 px-4">
                  <div>
                    <a href="https://mdbootstrap.com/docs/angular/?utm_campaign=PS&utm_source=Package"><img
                        src="https://mdbootstrap.com/img/Marketing/general/logo/small/angular.png"></a>
                    <h3 class="card-title pt-2 font-weight-bold"><strong>Angular</strong></h3>
                    <p>Get beautiful components and useful features by clicking the button below.</p>
                    <a href="https://mdbootstrap.com/docs/angular/?utm_campaign=PS&utm_source=Package"
                      class="btn btn-danger"><i class="fas fa-clone left"></i>Learn more</a>
                  </div>
                </div>

              </div>
              <!-- Card -->
            </div>
            <div class="col-md-3">
              <!-- Card -->
              <div class="card card-image"
                style="background-image: url(https://mdbootstrap.com/img/Photos/Horizontal/Work/4-col/img%20%2814%29.jpg);">

                <!-- Content -->
                <div class="text-white text-center d-flex align-items-center rgba-black-strong py-5 px-4">
                  <div>
                    <a href="https://mdbootstrap.com/docs/react/?utm_campaign=PS&utm_source=Package"><img
                        src="https://mdbootstrap.com/img/Marketing/general/logo/small/react.png"></a>
                    <h3 class="card-title pt-2 font-weight-bold"><strong>React</strong></h3>
                    <p>Get beautiful components and useful features by clicking the button below.</p>
                    <a href="https://mdbootstrap.com/docs/react/?utm_campaign=PS&utm_source=Package"
                      class="btn btn-info"><i class="fas fa-clone left"></i>Learn more</a>
                  </div>
                </div>

              </div>
              <!-- Card -->
            </div>
            <div class="col-md-3">
              <!-- Card -->
              <div class="card card-image"
                style="background-image: url(https://mdbootstrap.com/img/Photos/Horizontal/Work/4-col/img%20%2814%29.jpg);">

                <!-- Content -->
                <div class="text-white text-center d-flex align-items-center rgba-black-strong py-5 px-4">
                  <div>
                    <a href="https://mdbootstrap.com/docs/vue/?utm_campaign=PS&utm_source=Package"><img
                        src="https://mdbootstrap.com/img/Marketing/general/logo/small/vue.png"></a>
                    <h3 class="card-title pt-2 font-weight-bold"><strong>Vue</strong></h3>
                    <p>Get beautiful components and useful features by clicking the button below.</p>
                    <a href="https://mdbootstrap.com/docs/vue/?utm_campaign=PS&utm_source=Package"
                      class="btn btn-green"><i class="fas fa-clone left"></i>Learn more</a>
                  </div>
                </div>

              </div>
              <!-- Card -->
            </div>


          </div>
        </section>

        <section class="my-4 text-center">
          <hr>
          <h3>I'm saying goodbye!</h3>
          <p class="lead mb-3">Beeing scrolled by you was a pleasure, I hope I'll see you soon at <a
              href="https://mdbootstrap.com/?utm_campaign=PS&utm_source=Package">mdbootstrap.com</a></p>
        </section>




      </div>
      <!--EXAMPLE CONTENT-->


    </div>

    <ul class="list-unstyled text-center mx-auto" style="max-width: 20em;">
      <li>
        <div class="md-form md-outline">
          <input type="number" id="width" value="800" class="form-control">
          <label for="width">Width</label>
        </div>
      </li>
      <li>
        <div class="md-form md-outline">
          <input type="number" id="height" value="400" class="form-control">
          <label for="height">Height</label>
        </div>
      </li>
      <li>
        <button id="resize" class="btn btn-primary btn-rounded mb-5">Change size<i
            class="fas fa-expand ml-2"></i></button>
      </li>
      <li>
        <a href="https://mdbootstrap.com/freebies/perfect-scrollbar/?utm_campaign=PS&utm_source=Package"
          class="btn btn-sm btn-outline-primary btn-rounded"><i class="fas fa-caret-square-left mr-2"></i>Back to
          docs</a>
      </li>
    </ul>
  </section>
  <!--EXAMPLE CONTENT-->

  <!--ADD PERFECT SCROLLBAR TO CONTAINER-->
  <script>
    new PerfectScrollbar('#container');

  </script>


  <!--ADDITTONAL SCRIPTS TO MAKE THE EXAMPLE CONTENT LOOK PRETTY-->
  <section>
    <!--jQuery-->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <!-- Bootstrap core JavaScript -->
    <script type="text/javascript"
      src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

    <!-- MDB core JavaScript -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.8.2/js/mdb.min.js">
    </script>

    <!--Handle size change-->
    <script>
      // Initialize the plugin
      const demo = document.querySelector('#container');
      const ps = new PerfectScrollbar(demo);

      // Handle size change
      document.querySelector('#resize').addEventListener('click', () => {

        // Get updated values
        width = document.querySelector('#width').value;
        height = document.querySelector('#height').value;

        // Set demo sizes
        demo.style.width = `${width}px`;
        demo.style.height = `${height}px`;

        // Update Perfect Scrollbar
        ps.update();
      });

    </script>

  </section>

  <!-- Footer -->
  <footer class="page-footer white-color font-small z-depth-5 d-block">

    <!-- Copyright -->
    <div class="row pt-3 px-3 w-100">
      <div class="col-md-4 d-md-block d-none">
        <p class="text-primary ml-3">Project maintained by
          <a href="https://mdbootstrap.com/?utm_campaign=PS&utm_source=Package"><img class="align-self-top"
              style="height:20px;" src="https://mdbootstrap.com/img/Marketing/general/logo/small/mdb.png"></a></p>
      </div>
      <div class="text-center text-primary col-md-8 col-lg-4">
        <p>Docs & Examples made pretty with
          <a href="https://mdbootstrap.com/jquery/docs/?utm_campaign=PS&utm_source=Package"
            class="text-primary font-weight-bold">Free MDB UI Kit</a></p>
      </div>
      <div class="col-md-4 d-lg-block d-none">

        <div class="flex-right float-right">

          <!--Github-->
          <a href="https://https://github.com/mdbootstrap/bootstrap-material-design" class="pin-ic">
            <i class="fab fa-github fa-lg text-primary mr-4"> </i>
          </a>
          <!-- Facebook -->
          <a href="https://www.facebook.com/mdbootstrap" class="fb-ic">
            <i class="fab fa-facebook-f fa-lg text-primary mr-4"> </i>
          </a>
          <!-- Twitter -->
          <a class="tw-ic">
            <i href="https://twitter.com/mdbootstrap?lang=en" class="fab fa-twitter fa-lg text-primary mr-4"> </i>
          </a>
          <!--Linkedin -->
          <a href="https://www.linkedin.com/company/material-design-for-bootstrap/" class="li-ic">
            <i class="fab fa-linkedin-in fa-lg text-primary mr-4"> </i>
          </a>
          <!--Newsletter-->
          <a href="https://mdbootstrap.com/docs/jquery/newsletter/" class="pin-ic">
            <i class="fas fa-envelope fa-lg text-primary"> </i>
          </a>

        </div>
      </div>
    </div>
    <!-- Copyright -->

  </footer>
  <!-- Footer -->

</body>

</html>